<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/css/public.css" media="all">

    <style>

    </style>
</head>
<body>
<div id="container" class="layuimini-container" style="background: none;">
    <div class="layuimini-main" style="margin: 0px;">
        <div class="layui-row layui-col-space15">

            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header"><h3><b>定期理财产品</b></h3></div>
                    <div class="layui-card-body">
                        <div id="pieCharts" style="width: 100%;"></div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md6">
                <div class="layui-card" style="margin-bottom: 0px;">
                    <div class="layui-card-header"><h3><b>天天盈理财概览</b></h3></div>
                    <div class="layui-card-body">
                        <table class="layui-table" lay-skin="line">
                            <colgroup>
                                <col width="150">
                                <col width="150">
                                <col width="200">
                                <col>
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>产品名称</th>
                                    <th>购买人数</th>
                                    <th>购买金额</th>
                                </tr>
                            </thead>
                            <tbody >
                                <tr  >
                                    <td>{{ttyCountInfo.finaProdName}}</td>
                                    <td>{{ttyCountInfo.finaProdCountUser}}</td>
                                    <td>{{ttyCountInfo.finaProdCountMoney}} SHQC</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="layui-card">
                    <div class="layui-card-header">
                        <h3><b>定期理财产品概览</b></h3>
                        <h4 style="position: absolute;top:3px;right: 20px;"><a href="#" style="color: blue;" @click="openDetail">查看详情</a></h4>
                    </div>
                    <div class="layui-card-body">
                        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- Vue 表达式与Layui模板表达式冲突，需放在Vue Scope 外边 -->
<script type="text/html" id="operTpl">
    <a class="table-row-bar" lay-event="dealApply" style="color: #1890FF;">处理</a>
</script>

<script type="text/html" id="statusTpl">
    {{# if(d.orderStatus == '1000'){ }}
    <span class="layui-badge layui-bg-blue">待处理</span>
    {{# } else { }}
    <span class="layui-badge layui-bg-green">已完成</span>
    {{#  } }}
</script>

<script type="text/html" id="applyTypeTpl">
    {{# if(d.reqType == '1000'){ }}
    <span style="color: #1890FF;">提币</span>
    {{# } else { }}
    <span style="color: #5FB878;">兑换</span>
    {{#  } }}
</script>



<script type="text/html" id="danwei_SHQC">
    {{# if(d.finaProdCountMoney != null ){ }}
    <span >{{d.finaProdCountMoney}} SHQC</span>
    {{# } else { }}
    <span ></span>
    {{#  } }}
</script>


<script src="/wpui-admin/wp-ewallet-admin/static/js/jquery-3.4.1.min.js"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/lib/layui/layui.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/module/index/config.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/js/vue.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/js/vue-i18n.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp-i18n.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp-project.js" charset="utf-8"></script>

<script>
    layui.use(['form', 'table','echarts'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            echarts = layui.echarts;

        var height = window.innerHeight - 40;

        var vm = new Vue({
            el: '#container',
            i18n: wp.i18n(),
            data: {
                name:'张三',
                ttyCountInfo:"",
                finaProdCountDtolist:[],
                finaProdCountDtoNameList:[],
            },
            mounted:function(){
                this.init();
                this.pieCharts();
                this.grid();
                this.getTtyCountInfo();
            },
            methods: {
                init:function(){
                    $("#pieCharts").height(height - 45);
                },
                pieCharts:function(){
                    var self =this;
                    self.getgetFixFinaProdCountPercent(function(data,nameData){
                        var option = {
                            tooltip: {
                                trigger: 'item',
                                formatter: '{b}: {d}%'
                            },
                            legend: {
                                orient: 'vertical',
                                icon:"rect",
                                width:10,
                                bottom:0,
                                left: 'center',
                                data: nameData,
                                formatter: function(name) {
                                    var data = option.series[0].data;
                                    var total = 0;
                                    var tarValue;
                                    for (var i = 0, l = data.length; i < l; i++) {
                                        total += data[i].value;
                                        if (data[i].name == name) {
                                            tarValue = data[i].value;
                                        }
                                    }
                                    return name + ' ' + '：' +  tarValue + '%';
                                },
                            },
                            series: [
                                {
                                    name: '',
                                    type: 'pie',
                                    top:0,
                                    center: ['50%', '35%'],
                                    radius: ['40%', '60%'],
                                    avoidLabelOverlap: false,
                                    label: {
                                        normal: {
                                            show: false,
                                            position: 'center',
                                            formatter: '{d}%\n{b}'
                                        },
                                        emphasis: {
                                            show: true,
                                            textStyle: {
                                                fontSize: '25',
                                                fontWeight: 'bold'
                                            }
                                        }
                                    },
                                    labelLine: {
                                        normal: {
                                            show: false
                                        }
                                    },
                                    data:data
                                }
                            ]
                        };
                        var pieCharts = echarts.init(document.getElementById('pieCharts'));
                        pieCharts.setOption(option);
                        // 设置默认选中高亮部分
                        pieCharts.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 0});
                        // 当鼠标移入时，如果不是第一项，则把当前项置为选中，如果是第一项，则设置第一项为当前项
                        pieCharts.on('mouseover',function(e){
                            pieCharts.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex:0});
                            if(e.dataIndex != index){
                                pieCharts.dispatchAction({type: 'downplay', seriesIndex: 0, dataIndex: index  });
                            }
                            if(e.dataIndex == 0){
                                pieCharts.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex:e.dataIndex});
                            }
                        });
                        // 当鼠标离开时，把当前项置为选中
                        pieCharts.on('mouseout',function(e){
                            index = e.dataIndex;
                            pieCharts.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: e.dataIndex});
                        });
                    });
                },
                grid:function(){
                    var that = this;
                    table.render({
                        skin: 'line',//行边框风格
                        elem: '#currentTableId',
                        url: wp.url('/wp/ewallet/wmps/finaProd/getFixFinaProdCountDtos'),
                        headers:wp.getAjaxHeaders(),
                        parseData: wp.parseGridData,
                        height:height - 215,
                        cols: [[
                            {field: 'finaProdName', title: '产品名称'},
                            {field: 'finaProdCountUser', title: '购买人数'},
                            {field: 'finaProdCountMoney', title: '购买金额', templet:'#danwei_SHQC',align:'right'}
                        ]],
                        limits: wp.config.pageList,
                        limit: wp.config.pageSize,
                        page: true
                    });
                },
                openDetail:function(){
                    var self = this;
                    var url = wp.resUrl('/wpui-admin/wp-ewallet-admin/module/wmps/wmps-buy-detail.html');
                    var title = '理财产品查询详情';

                    // 添加到tab
                    var iframeWindow = wp.addTab(url,title);
                    iframeWindow.walletApplyVm = self;
                    iframeWindow.data = data;
                    // 窗口关闭方法
                    iframeWindow.close = function(){
                        wp.closeTab(iframeWindow.tabId);
                    }
                    iframeWindow.onLoadFinish = function(vm){

                    }
                },
                //天天赢概况
                getTtyCountInfo:function () {
                    var self=this;
                    wp.httpGet({
                        url:wp.url("/wp/ewallet/wmps/finaProd/getTtyCountInfo"),
                        success:function (data) {
                            self.ttyCountInfo=data.dataBody;
                        }
                    })

                },
                //查看百分比
                getgetFixFinaProdCountPercent:function (callback) {
                    var self =this;
                    wp.httpGet({
                        url:wp.url("/wp/ewallet/wmps/finaProd/getgetFixFinaProdCountPercent"),
                        success:function (data) {
                            for (var i = 0, l = data.dataBody.length; i < l; i++) {
                                self. finaProdCountDtolist.push({
                                    value:(parseFloat(data.dataBody[i].finaProdCountMoneyPercentage) * 100).toFixed(2),
                                    name:data.dataBody[i].finaProdName
                                });
                            }
                            for (var i = 0, l = data.dataBody.length; i < l; i++) {
                                self. finaProdCountDtoNameList.push(data.dataBody[i].finaProdName);
                            }

                            self.$nextTick(function () {
                                callback(self.finaProdCountDtolist,self.finaProdCountDtoNameList);
                            });
                        }
                    })


                }



            }
        });
    });
</script>
<script>

</script>

</body>
</html>